<template>
	<flexbox align="center">
		<template v-for="i in counts || 2">
			<el-input
				:type="item.data.type || 'number'"
				v-model="dataValue[i - 1]"
				@change="onChange"
				:placeholder="item.placeholders[i - 1] || '请输入'"
			></el-input>
			<div class="hr" v-show="i < dataValue.length" />
		</template>
	</flexbox>
</template>

<script>
import PropsMixin from './mixins/props'
import arrayMixin from './arrayMixin'
import ValueChangeMixin from './mixins/value-change'
export default {
	mixins: [PropsMixin, ValueChangeMixin, arrayMixin],
	props: {
		counts: {
			type: Number,
			default: 2
		}
	},
	data() {
		return {
			dataValue: []
		}
	},
	computed: {},
	mounted() {
		if (Array.isArray(this.value) && this.value.length) {
			this.dataValue = this.value
		} else {
			this.dataValue = Array(this.counts).fill('')
		}
	},
	watch: {
		value() {
			if (Array.isArray(this.value) && this.value.length) {
				this.dataValue = this.value
			} else {
				this.dataValue = Array(this.counts).fill('')
			}
		}
	},
	methods: {
		onChange() {
			this.valueChange(this.dataValue)
		}
	},
	components: {}
}
</script>

<style lang="scss" scoped="scoped">
.hr {
	border-top: 1px solid #999;
	width: 12px;
	margin: 0 1px;
}
</style>
